<template>
	<!-- 小程序：不支持API调用，只能用户主动点击触发分享。可使用自定义按钮方式 <button open-type="share"> 或监听系统右上角的分享按钮 onShareAppMessage 进行自定义分享内容
	H5：如果是普通浏览器，浏览器自带分享按钮；如果是在微信内嵌浏览器中，可调用js-sdk进行分享
	APP：可以直接使用已经封装好的uni-share插件 -->
	<view id="share">
		<view class="item-icon">
		   <text class="iconfont" :class="[`icon-${data.icon}`]"></text>
		</view>
		<view class="item-name">{{ data.name }}</view>
	</view>
</template>

<script>
	import wx from 'jweixin-1.6.0'
	import * as jweixin from 'weixin-js-sdk'
	import * as UserApi from '@/api/user'
	export default {
	  components: {
	  },
	  props: {
		  data: {
			  type: Object,
			  default: {}
		  },
		  isShare: {
			  type: Boolean,
			  default: false
		  }
	  },
	  watch: {
		  isShare: {
			  handler(newDta,oldData) {
				  console.log(newDta)
				  this.userId = uni.getStorageSync('userId') || 0
				  if(newDta) {
					   // this.initWechatShare({appId:"",timestamp: '',nonceStr: '',signature:'' })
					   this.weixinShareInfo()
				  }
				  console.log('333333333333', this.userId)
				  this.weixinShareInfo()
			  },
			  immediate: true
		  }
	  },
	  data() {
	    return {
			userId: '', // 用户id
		}
	  },
	  onLoad(option) {
		 
	  },
	  onShow() {
		 
	  },
	  methods: {
		  // onShareData(shareData){
		  //     let _this = this;
		  //     HttpUtil(reqUrl.getConfigInfo, { 
		  //         data: {
		  //             url :  encodeURIComponent(location.href.split("#")[0]), //当前页面的url
		  //         },
		  //         success: data => {
		  //             // initWechatShare(data,shareData);
		  //         }
		  //     });
		  // },
		 //  initWechatShare(configData) {
			//   // let url = location.href.split('#')[0];
			//   // let link = encodeURIComponent(url);
			//   // $.ajax({
			//   //     type: "GET",
			//   //     url: 'https://h5-saic.matrixpr.net/know/token/get-sign-str1',
			//   //     dataType: "jsonp",
			//   //     jsonp: 'callback',
			//   //     data: {
			//   //         url: link,
			//   //         type: '02'
			//   //     },
			//   //     success: function(res) {
			//   //         wx.config({
			//   //             debug: false,
			//   //             appId: res.data.appId,
			//   //             timestamp: res.data.timestamp,
			//   //             nonceStr: res.data.noncestr,
			//   //             signature: res.data.signature,
			//   //             jsApiList:['updateTimelineShareData','updateAppMessageShareData']
			//   //     });
		 //    wx.config({
		 //      debug: false, // 开启调试模式
		 //      appId: configData.appId, // 必填，公众号的唯一标识
		 //      timestamp: configData.timestamp, // 必填，生成签名的时间戳
		 //      nonceStr: configData.nonceStr, // 必填，生成签名的随机串
		 //      signature: configData.signature, // 必填，签名
		 //      jsApiList: ["onMenuShareAppMessage", "onMenuShareTimeline","updateAppMessageShareData","updateTimelineShareData"], // 必填，需要使用的JS接口列表
		 //    });
			
		 //   // let share_title=uni.getStorageSync('sys_info')['share_title']!=''?uni.getStorageSync('sys_info')['share_title']:"分享标题";		  
		 //   // let share_desc=uni.getStorageSync('sys_info')['share_info']!=''?uni.getStorageSync('sys_info')['share_info']:"分享描述";
		 //   // let share_img=uni.getStorageSync('sys_info')['share_img'];
		 //    // 注册分享事件
		 //    wx.ready(function () {
		 //      wx.updateAppMessageShareData({
		 //        title: "", // 分享标题
		 //        desc: "", // 分享描述
		 //        link: window.location.href, // 分享链接
		 //        imgUrl: "https://example.com/share.png", // 分享图标
		 //        success: function () {
			// 		console.log('updateAppMessageShareData')
			// 	},
		 //        cancel: function () {
			// 		console.log('updateAppMessageShareDataCancel')
			// 	},
		 //      });
		  
		 //      wx.updateTimelineShareData({
		 //        title: "", // 分享标题
		 //        link: window.location.href, // 分享链接
		 //        imgUrl: "https://example.com/share.png", // 分享图标
		 //        success: function () {
			// 		console.log('updateTimelineShareData')
			// 	},
		 //        cancel: function () {
			// 		console.log('updateTimelineShareDataCancel')
			// 	},
		 //      });
		 //    });
		 //    wx.error( (res) => {});
		 //  },
		  
		  
		  
		  weixinShareInfo(){
				var that = this;
				//获取当前url然后传递给后台获取授权和签名信息
				var urls = window.location.href.split('#')[0]; //当前网页的URL，不包含#及其后面部分
				console.log('888:',window.location.href.split('#')[0], new Date().getTime());
			
				var data = {
					path:'http://wly.xcnf.com/h5/#/pages/login/index?refereeId=' + that.userId
				}
				  //获取到微信分享相关配置
				UserApi.wechatGetSignInfo(data, { load: true }).then(res => {
					if(res.data){
						console.log('res.data',res.data);
						jweixin.config({
						  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
						  appId: res.data.appId, // 必填，公众号的唯一标识
						  timestamp: res.data.timestamp, // 必填，生成签名的时间戳
						  nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
						  signature: res.data.signature,// 必填，签名
						  url: res.data.url,
						  jsApiList: ["checkJsApi","onMenuShareTimeline","onMenuShareAppMessage","onMenuShareQQ","updateAppMessageShareData","updateTimelineShareData"] // 必填，需要使用的JS接口列表
						})
						jweixin.ready(function(){
							console.log(999999999998888888888);
					//         //隐藏右上角菜单接口
					//         jweixin.hideOptionMenu();
					//         // 隐藏所有基础类
					//         jweixin.hideAllNonBaseMenuItem();
							jweixin.checkJsApi({
							  jsApiList: ['onMenuShareTimeline',"onMenuShareAppMessage","updateAppMessageShareData","updateTimelineShareData"], // 需要检测的JS接口列表，所有JS接口列表见附录2,
							  success: function(res2) {
								 console.log('checkJsApidddddddddd',res2)
								 jweixin.onMenuShareTimeline({
								   title: '快看！这里有个帅哥', // 分享标题
								   link: res.data.url, // urls+'#/pages/login/index'分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
								   imgUrl: '', // 分享图标
								   success: function () {
								 	  // 用户点击了分享后执行的回调函数
								 	  console.log('成功分享')
								   },
								   fail: function() {
								 	  console.log('失败分享')
								   }
								 })
								 jweixin.onMenuShareAppMessage({
								   title: '快看！这里有个帅哥', // 分享标题
								   desc: '你看我帅不帅', // 分享描述
								   link: res.data.url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
								   imgUrl: '', // 分享图标
								   type: '', // 分享类型,music、video或link，不填默认为link
								   dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
								   success: function () {
								     // 用户点击了分享后执行的回调函数
								 	console.log('成功分享')
								   }
								 });
							  },
							  fail: function(err){
								  console.log('checkJsApi:',err);
							  }
							});	
						   // 以键值对的形式返回，可用的api值true，不可用为false
							// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
							// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
																
						  //  weixin.updateAppMessageShareData({ 
								// title: '测试标题', // 分享标题
								// desc: '', // 分享描述
								// link: urls+'#/pages/login/index', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
								// imgUrl: '', // 分享图标
								// success: function () {
								//   // 设置成功
								// 	console.log('===分享===');
								// }
						  //  })
						   
						  //  weixin.updateTimelineShareData({
								// title: '测试标题', // 分享标题
								// desc: '', // 分享描述
								// link: urls+'#/pages/login/index', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
								// imgUrl: '', // 分享图标
								// success: function () {
								//   // 设置成功
								// 	console.log('===分享===');
								// }
						  //  })
						})
						jweixin.error(function(err){
							console.log('err:',err);
							that.$emit('callBackShare')
							// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
						})
				    }
				}).catch(err => {
					
				})
		  },
	  }
	}
</script>

<style scoped lang="scss">
	#share {
	  // position: relative;
	  // width: 25%;
	  // float: left;
	  // margin-bottom: 30rpx;
	
	  .item-icon {
	    text-align: center;
	    margin: 0 auto;
	    padding: 14rpx 0;
	    color: $main-bg;
	    font-size: 44rpx;
	  }
	.icon{
			  font-size: 60rpx;
	 }
	  .item-name {
	    font-size: 28rpx;
	    color: #545454;
	    text-align: center;
	  }
	
	}
</style>